【Day 02】前端與後端的差異（1）語言簡介

2024 iThome 鐵人賽

DAY 2

自我挑戰組

從零開始全端實作 Express.js + TypeScript + DevOps 系列第 2 篇

16th鐵人賽 html5 css3 javascript node.js

csning1998

2024-09-12 23:28:11

181 瀏覽

分享至

點我查看目錄

網頁前後端是什麼？

網頁前端

泛指我們打開瀏覽器所會看到的畫面，包含一些視覺元素與使用者圖形界面（Graphic User Interface, GUI），我們會跟這些內容「互動」。舉例來說，當你在使用 www.google.com 做關鍵字搜尋的當下，你就是在使用前端網頁了。[1]

網頁後端

就是攸關這些「互動」的邏輯，也就是執行指令或調動資料庫的內容。當你按下「搜尋」按鈕時，後端網頁就會根據你的動作，提供你所要看到的資料。[1]

有關前端「開發」

假設你現在要開始寫前端的網頁了，那我們首先就會碰到以下三種語言，我稱為「前端三兄弟」：

HTML, CSS, JavaScript
Sourse: https://res.cloudinary.com/proxify-io/image/upload/c_fit,f_auto,q_auto,dpr_auto,w_900/v1/cms/images/gallery/CLBKywZE1FXgnQ1gU2Rq4xKC8h0WbqrdrzBaV7a1.png

HTML, Hypertext Markup Language：

這中文是「超文本標記語言」，是由 Tim Berners-Lee 在 1991 年發表的，當時他在歐洲核子研究組織（CERN）工作，而希望找到一種能夠通過互聯網（WWW）共享研究資料的解決方案。他主要用一些標記的語法打造出網頁的結構，以及頁面之間的轉換。這就像是一間餐廳的布局設計，你會需要對招牌、餐桌、廚房、服務台的位置進行定義、思考客人進入餐廳的動線等。[2]

在 HTML 中，這些佈局就像是網頁上的標題、段落、圖片、按鈕的位置。這些元素確定了整個餐廳的基礎架構，但還沒有進行裝潢或設置功能性設備，也就是說這時餐廳還只是骨架，你勢必要做些裝潢的（當然例外就是，你主打毛胚屋餐廳）。

CSS, Cascading Style Sheets：

這中文是「疊接樣式表」，屬於一種「樣式表語言」，由 Håkon Wium Lie 和 Bert Bos 在 1996 年提出，目的是將設計和排版與內容分離，使得開發者可以通過單獨的樣式表，來設定網頁的樣式和佈局，包含決定整體的配色、字體、圖片大小等視覺元素，這樣設計與網頁內容就不會混在一起了，還可以讓你的畫面有更具吸引力的「靜態」視覺體驗 [3]。若類比至餐廳的設計，CSS 就像是餐廳的裝潢設計，你可以想像是決定牆面粉刷顏色、桌椅風格、燈光設計等裝飾。一個優秀的 CSS 設計師就好比是好的室內設計師，會在給定的架構中，呈現出視覺風格和美感。

JavaScript：

JavaScript 的歷史源於 1995 年，有位名為 Brendan Eich 的工程師在短短 10 天就在 Netscape 瀏覽器中發明出來了 [4]。在早期那「單純」前端網頁中，JS 被視為跟 HTML 與 CSS 搭配的腳本語言，專門用來呈現出網頁複雜的「動態」功能，讓你的程式不再只是「靜態」的內容 [5]。若類比至餐廳，JavaScript 就像是負責餐廳中的自動化設備，例如自動門、空調控制系統，甚至是餐桌上的呼叫按鈕，讓顧客可以隨時呼叫服務員（我們待會藉此延伸）。JavaScript 也可以負責一些進階的功能，例如當顧客走進餐廳時，自動打開燈光或調整音樂氛圍，就像是在網頁上按下按鈕後，某個功能自動執行一樣。

在前段網頁中，JavaScript 就負責讓網頁加入了「互動」的元素，像是當你按下播放按鈕，youtube.com 的影片就會開始播放一樣；而 JavaScript 也可以用來寫一個小遊戲，例如網路斷線時，會在 Chrome 瀏覽器中看到的小恐龍遊戲一樣。

有關後端「開發」

What Backend is?
Source: https://ddi-dev.com/blog/programming/backend-development-key-languages-technologies-features-in-2020/

如果你開始好奇「運作系統」是如何工作的，亦即伺服器的功能如何被實做出來，那這正是「後端開發」所處理的範疇囉！在網站中，後端負責處理 Client 端發出的請求，並與伺服器協作，進行資料處理、數據儲存、執行程式邏輯，提供前端所需的內容，同時確保系統的安全性和穩定性。由於世界上有各式各樣的需求，自然也會衍生出許多不同的運作系統「解決方案」[6]。換句話說，每一種程式語言都有其專精的領域：

Node.js：

這是由 Ryan Dahl 在 2009 年在 Berlin JS 大會上，所展示的跨平台且開源的執行環境，用來在瀏覽器之外執行 JavaScript 程式碼。但我要先說，即便很多人把 Node.js 當作程式語言，但你要知道：根據官方文件指出：Node.js 只是一個 JS 的執行環境，並不是一個框架、也不是一種程式語言 [7]。

Node.js is a JavaScript runtime built on the V8 JavaScript engine. [7]

TypeScript：

這是 Microsoft 在 2012 年由 Anders Hejlsberg 領導的團隊開發並公開的一種程式語言，主要目的是解決 JavaScript 在大型應用程式開發中的不足。[8]
在 JavaScript 流行的當時隨著使用者需求，應用程式規模愈做愈大，開發者們逐漸發現 JavaScript 由於缺乏強型別以及一些更嚴謹的語法，難以維護大型 Repository 和一些複雜的 App。因此，微軟開發了 TypeScript 做為 JavaScript 的 Superset（超集），增加強型別（Static Typing）並提升了大規模 App 開發和維護的效率。所以在多人協作的專案或環境中，TypeScript 有助於團隊中的成員清楚理解每個區塊的輸入和輸出，減少溝通成本和執行錯誤的發生。[8]

Java

不知道你有沒有發現語言開始變得越來越多了？還有很多目前在這裡不會提到的，如 C（1972）、C++（1983）、Perl（1987）、Python（1991）、Visual Basic（1991）、Ruby（1993）、PHP（1995）等。[9] 在 1990 年代，當時的開發者就面臨要為不同操作系統編寫不同程式專案的挑戰，因此就有人在想：「有沒有一種語言可以獨挑大樑？」於是乎 Java 就這樣誕生了～

Java 由 James Gosling 和他的團隊於 1990 年代初在 Sun Microsystems 開發，最初名為 Oak，後來改為 Java，並於 1995 年正式發布。[10] Java 的誕生主要是為了解決跨平台寫程式的需求，主打「一次編撰，到處運行」（Write Once, Run Anywhere）口號。[11] 在 2000 年代的 Java 藉著虛擬機，可以說是攻佔各大作業系統，如 Linux、微軟 Windows、手機 OS 透過 Java ME（Micro Edition）、巨頭 Nokia 的 Symbian、機器人 Android（2008）…等。

Java 的核心特點是其 物件導向程式設計（Object-Oriented Programming, OOP） 模型，這種嚴謹的定義使得 Java 適合處理大型專案等複雜、且須嚴謹的邏輯結構。而因為 Java 可以做到模組化，又可以運作在 Web 與作業系統，使得 Java 成為企業級 Program 的首選語言之一。然而儘管 Java 功能強大，但缺點就是 語法相對冗長 和繁瑣，所以在一些小型專案或需要快速開發時，開發者可能會覺得 Java 的開發速度受到牽制。然而你也可以為此直接選擇其他語言，如 Python、基於 Node.js 執行 JavaScript 或 TypeScript；但有公司為了解決這個問題，於是乎 Kotlin 就誕生了。

Kotlin

Kotlin 是由 JetBrains 公司於 2011 年開發的一種現代編程語言，並於 2016 年首次穩定發布。（JetBrains 做為 IDE 開發公司，旗下著名產品為 IntelliJ IDEA）。而 Kotlin 的出現主要是為了解決 Java 長期以來存在的冗長與繁瑣的問題，提供開發者一個更簡潔、靈活的替代語言。[12] 當然，還有很多細節在簡介中不會提到，我在這系列文中也不會使用 Java 或 Kotlin 做開發語言，僅做簡單舉例：

例如，我們要用 Java 和 Kotlin 寫 Hello World 的程式：

Java：

public class Main {
    public static void main(String[] args) {
        String message = "Hello, World!";
        System.out.println(message);
    }
}

Kotlin：

fun main() {
    val message = "Hello, World!"
    println(message)
}

再舉一個極端的案例：如果我們要寫 Data Classes，這差異就相當明顯了 [13]：

Java：

public class User {
    private String name;
    private int age;

    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{name='" + name + "', age=" + age + '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        User user = (User) o;
        return age == user.age && Objects.equals(name, user.name);
    }

    @Override
    public int hashCode() {
        return Objects.hash(name, age);
    }
}

Kotlin：

data class User(val name: String, val age: Int)

儘管 Kotlin 是較新的語言，但基本上與 Java 完全兼容，代表現有的 Java 專案可以輕鬆引入 Kotlin，而不需要完全重寫程式架構。這使得 Kotlin 在 Android 應用開發和一些原生 Java 後端系統中越來越受歡迎，特別是在需要快速開發、靈活性高的環境中，Kotlin 可以說是佔盡優勢。

When Java Devs meet Kotlin
Source: https://www.codeitbro.in/java-memes/kotlin-vs-java-meme/